import styles from "@pages/article/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";


dayjs.extend(relativeTime);

interface Props {
  comment: ArticleComment;
}

export default function Comment({ comment }: any) {
  const isValidDate = dayjs(comment.pubdate).isValid();
  const formattedDate = isValidDate
   ? (dayjs() as any).to(dayjs(comment.pubdate)) // 使用类型断言
    : "未知时间";

  return (
    <div className={styles.item}>
      <div className={styles.commentator}>
        <div className={styles.avatar}>
          <img src={comment.aut_photo} alt="" />
          <span>{comment.aut_name}</span>
        </div>
        <div className={styles.like}>
          <span>{comment.like_count}</span>
          <GeekIcon type={"iconbtn_like"} />
        </div>
      </div>
      <div className={styles.discuss}>{comment.content}</div>
      <div className={styles.bottom}>
        <div className={styles.reply}>
          <button aria-label={`查看 ${comment.reply_count} 条回复`}>
            {comment.reply_count} 回复
          </button>
          <span>{formattedDate}</span>
        </div>
        <GeekIcon
          type={"iconbtn_essay_close"}
          className={styles.close}
          aria-label="关闭评论"
        />
      </div>
    </div>
  );
}